<template>
  <div class="mui-pages record-member-lists">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <div @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png">
        </div>
        <div class="header-search flex-center">添加未答说明</div>
        <div @click="submit" class="header-right-btn flex-center">提交</div>
      </div>
    </header>
    <div id="scroll1" class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <ul class="mui-table-view meeting-editor-lists">
          <li class="mui-table-view-cell flex-between-center" id="typeSelect">
            <b><span class="mine-lists-money">*</span>试卷名称：</b>
            <span class="mine-lists-content">{{answerExplainItem.paperName}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center" id="rangeSelect">
            <b><span class="mine-lists-money">*</span>申请人员：</b>
            <span class="mine-lists-content">{{applyName}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center">
            <b><span class="mine-lists-money">*</span>所属支部：</b>
            <span class="mine-lists-content">{{answerExplainItem.partyGroupName}}</span>
          </li>
          <li class="mui-table-view-cell flex-between-center">
            <b><span class="mine-lists-money">*</span>提交人：</b>
            <span class="mine-lists-content">{{submitName}}</span>
          </li>
          <li class="mui-table-view-cell">
            <b><span class="mine-lists-money">·</span>情况说明：</b>
            <textarea class="list-textarea" v-model="reason" id="textarea" rows="5" placeholder="请填写免答特殊情况说明"></textarea>
          </li>
          <li class="mui-table-view-cell">
            <b>附件：</b>
            <ul class="mui-content-padded flex-justify-start">
              <cube-upload ref="upload"
                           action=""
                           v-model="files"
                           accept="*/*"
                           :simultaneous-uploads="1"
                           @files-added="uploadFile"
                           @file-removed="fileRemoved"
                           @input="onInput"
              />
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import fileIcon from '../../../../static/images/up_document.png'

  export default {
    name: 'answerExplain',
    data () {
      return {
        fn: tools,
        files: [],
        attachmentList: [],
        applyName: '',
        submitName: '',
        reason: '',
        answerExplainItem: {},
        isLoading: true,
        partyGroupName: ''
      }
    },
    created () {
      this.answerExplainItem = this.$store.state.answerExplainItem
      let userInfo = this.$store.state.userInfo
      this.submitName = userInfo.fullname
      this.applyName = this.answerExplainItem.partyMemberName
    },
    methods: {
      submit () {
        if (this.reason === null || this.reason === '') {
          return tools.tip('情况说明不能为空')
        }
        let attachment = this.makeStr(this.attachmentList)
        let data = {
          attachment: attachment,
          weekPlanId: this.answerExplainItem.weekPlanId,
          reason: this.reason,
          userId: this.answerExplainItem.partyMemberId
        }
        this.isLoading = true
        console.log("data=", data)
        loginService.submitExamNoAnswerRequest(data).then(res => {
          this.isLoading = false
          tools.tip(res.message)
          if (res.code === 200) {
            this.fn.back()
          }
        })
      },
      // 删除文件
      fileRemoved (file) {
        this.attachmentList.some((v, i) => {
          if (v.fileName === file.file.name && v.totalBytes === file.file.size) {
            this.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      uploadFile (file) {
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        loginService.updFiles(formData).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.attachmentList.push({
            'fileId': res.data[0].fileId,
            'fileName': uploadFile.name,
            'totalBytes': res.data[0].totalBytes
          })
        })
      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      },
      makeStr (arr) {
        return JSON.stringify(arr)
        let arrImg = []
        arr.forEach((v) => {
          arrImg.push(`{'fileId':'${v.fileId}','fileName':'${v.fileName}','totalBytes':${v.totalBytes}}`)
        })
        return `[${arrImg.join(',')}]`
      }
    }
  }
</script>

<style scoped>

</style>
